import { SvgComponent } from "@/components/base/Svg"
import styled from "@emotion/styled"
import { ReactNode } from "react"

const Label = styled.h3`
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    color: #1b1e22;
    margin: 0;
    padding: 0;
`

const IconIndicator = styled.span`
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
`

const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Gilroy;
    padding: 0 12rem 8rem;
`

const IconArrowSvg = styled(SvgComponent("pages/HomePage/icon_arrow.svg"))``
export const CategoryGameLabel = ({
    showArrow = true,
    children = "",
    onArrowClick,
}: {
    children: ReactNode
    onArrowClick?: () => void
    showArrow?: boolean
}) => {
    return (
        <Container>
            <Label>{children}</Label>
            {showArrow && (
                <IconIndicator onClick={() => onArrowClick?.()}>
                    <IconArrowSvg />
                </IconIndicator>
            )}
        </Container>
    )
}
